<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>任务一：零基础HTML及CSS编码</title>
</head>

<style>
    .pic-list {
        margin-left: 30px;
    }
</style>
<body>

<div>
    <h1>网站一级标题</h1>

    <ul>
        <li><a href="http://ife.baidu.com/">导航链接一</a></li>
        <li><a href="http://ife.baidu.com/course/all">导航链接二</a></li>
        <li><a href="http://ife.baidu.com/note/list?isElite=1">导航链接三</a></li>
        <li><a href="http://giscafer.com">导航链接四</a></li>
    </ul>
</div>
<div>
    <h2>文章一级标题</h2>
    <h3>文章二级标题</h3>
    <span>文章作者</span>&nbsp;<span>文章发表时间</span>
    <section>
        <div>
            这是一个很长很长的段落，这是一个很长很长的段落，这是一个很长很长的段落，这是一个很长很长的段落，这是一个很长很长的段落，
            这是一个很长很长的段落，这是一个很长很长的段落，这是一个很长很长的段落，这是一个很长很长的段落，这是一个很长很长的段落，换行了</br>
            这是一个很长很长的段落，这是一个很长很长的段落，这是一个很长很长的段落，<a href="http://giscafer.com">这里的链接是到博客</a>，这是一个很长很长的段落，
            这是一个很长很长的段落，这是一个很长很长的段落，这是一个很长很长的段落，这是一个很长很长的段落，这是一个很长很长的段落。
        </div>
        <img src="../../github.jpg" alt="" width="20%"/>
        <div>
            这是一个很长很长的段落，这是一个很长很长的段落，这是一个很长很长的段落，这是一个很长很长的段落，这是一个很长很长的段落，
            这是一个很长很长的段落，这是一个很长很长的段落，这是一个很长很长的段落，这是一个很长很长的段落，这是一个很长很长的段落，换行了</br>
            这是一个很长很长的段落，这是一个很长很长的段落，这是一个很长很长的段落，这是一个很长很长的段落，这是一个很长很长的段落，
            这是一个很长很长的段落，这是一个很长很长的段落，这是一个很长很长的段落，<a href="http://giscafer.com" target="_blank">这里的链接是打开新窗口到博客</a>，这是一个很长很长的段落，
            这是一个很长很长的段落，这是一个很长很长的段落，这是一个很长很长的段落，这是一个很长很长的段落，这是一个很长很长的段落，
            这是一个很长很长的段落，这是一个很长很长的段落，这是一个很长很长的段落，这是一个很长很长的段落，这是一个很长很长的段落，
            这是一个很长很长的段落，这是一个很长很长的段落，这是一个很长很长的段落，这是一个很长很长的段落，这是一个很长很长的段落。
        </div>
    </section>

</div>
<div>
    <h2>另一篇文章一级标题</h2>
    <h3>文章二级标题</h3>
    <span>文章作者</span>&nbsp;<span>文章发表时间</span>
    <section>
        <div>
            这是一个很长很长的段落，这是一个很长很长的段落，这是一个很长很长的段落，这是一个很长很长的段落，这是一个很长很长的段落，
            这是一个很长很长的段落，这是一个很长很长的段落，这是一个很长很长的段落，这是一个很长很长的段落，这是一个很长很长的段落，换行了</br>
            这是一个很长很长的段落，这是一个很长很长的段落，这是一个很长很长的段落，<a href="http://giscafer.com">这里的链接是到博客</a>，这是一个很长很长的段落，
            这是一个很长很长的段落，这是一个很长很长的段落，这是一个很长很长的段落，这是一个很长很长的段落，这是一个很长很长的段落。
        </div>
        <img src="../../github.jpg" alt="" width="20%"/>
        <div>
            <ul>
                <li>项目列表一</li>
                <li>项目列表二</li>
                <li>项目列表三</li>
            </ul>
            <div>
                <h3>图片</h3>
                <div class="pic-list">
                    <div class="pic-item">
                        <p>好看的图片</p>
                        <img src="../../github.jpg" alt="" width="10%"/>
                    </div>
                    <div class="pic-item">
                        <p>好看的图片</p>
                        <img src="../../github.jpg" alt="" width="10%"/>
                    </div>
                    <div class="pic-item">
                        <p>好看的图片</p>
                        <img src="../../github.jpg" alt="" width="10%"/>
                    </div>
                    <div class="pic-item">
                        <p>好看的图片</p>
                        <img src="../../github.jpg" alt="" width="10%"/>
                    </div>
                    <div class="pic-item">
                        <p>好看的图片</p>
                        <img src="../../github.jpg" alt="" width="10%"/>
                    </div>
                    <div class="pic-item">
                        <p>好看的图片</p>
                        <img src="../../github.jpg" alt="" width="10%"/>
                    </div>
                    <div class="pic-item">
                        <p>好看的图片</p>
                        <img src="../../github.jpg" alt="" width="10%"/>
                    </div>
                    <div class="pic-item">
                        <p>好看的图片</p>
                        <img src="../../github.jpg" alt="" width="10%"/>
                    </div>
                </div>
            </div>
        </div>
    </section>
</div>
<div>
    <h2>最后一篇文章一级标题</h2>
    <h3>最后一篇文章二级标题</h3>
    <span>文章作者</span>&nbsp;<span>文章发表时间</span>
    <div>
        <ul style="list-style:decimal">
            <li>排名1</li>
            <li>排名2</li>
            <li>排名3</li>
        </ul>
        <p>下边是一个表格，border="1"</p>
        <table border="1">
            <thead>
             <tr>
            <th>表头</th>
            <th>表头</th>
            <th>表头</th>
            <th>表头</th>
            </tr>
            </thead>
            <tbody>
            <tr>
                <td>单元格</td>
                <td>单元格</td>
                <td>单元格</td>
                <td><a href="http://giscafer.com">操作</a></td>
            </tr>
            <tr>
                <td>单元格</td>
                <td>单元格</td>
                <td>单元格</td>
                <td><a href="http://giscafer.com">操作</a></td>
            </tr>
            <tr>
                <td>单元格</td>
                <td>单元格</td>
                <td>单元格</td>
                <td><a href="http://giscafer.com">操作</a></td>
            </tr>
            <tr>
                <td>单元格</td>
                <td>单元格</td>
                <td>单元格</td>
                <td><a href="http://giscafer.com">操作</a></td>
            </tr>
            <tr>
                <td colspan="2">总计</td>
                <td colspan="2">10000</td>
            </tr>
            </tbody>
        </table>
    </div>
</div>
<div class="side">
    <h2>这里以后是一个侧栏，这是侧栏的标题</h2>
    <h2>侧栏注册窗口标题</h2>
    <form action="/">
        <div>
            <label>请输入邮箱地址：</label>
            <input type="text" placeholder="这是一个文本输入框"/>
            <p>邮箱地址请按要求输入</p>
        </div>
        <div>
            <label>请输入密码：</label>
            <input type="password" placeholder="这是一个文本输入框"/>
            <label>请重复输入密码：</label>
            <input type="password" placeholder="这是一个文本输入框"/>
            <p>密码请为6~16位英文数字</p>
        </div>
        <div>
            性别：<label><input name="sex" type="radio" value="" checked/>男 </label><label><input name="sex" type="radio" value="" />女 </label>
            城市：
            <select name="city" id="">
                <option value="beijing">北京</option>
                <option value="guangzhou">广州</option>
             </select>
            爱好：
            <input type="checkbox" value="sport"/> 运动
            <input type="checkbox" value="art"/> 艺术
            <input type="checkbox" value="science"/> 科学

            <br>
            个人描述：
            <textarea>这是一个多行输入框，请输入您的描述</textarea>
            <input type="button" value="确认提交"/>
        </div>
    </form>
</div>
<footer>
    <p>版权所有&copy;<a href="https://github.com/giscafer">giscafer</a></p>
    <hr>
    <p><strong>欢迎关注个人微信公众号：giscafer</strong></p>
    <img src="../../qrcode_for_giscafer.jpg" alt="微信公众号" width="10%"/>
</footer>
</body>
</html>